<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>搜索页</title>
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/public.css" />
	<link rel="stylesheet" href="../css/search.css" />
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script src="../js/public.js"></script>
	<style type="text/css">
		.s{
			
		}
	</style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav search-header jjs-header">
		<form action="" onsubmit="return false;">
			<i></i>
			<input type="text" placeholder="请输入关键词（基金名称、基金代码、经理简称）" />
			<button type="button" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right search-cancel">取消</button>
		</form>
	</header>
	<div class="mui-content">
		<div class="search-1">
			<div class="title">热搜推荐</div>
			<div class="hot-search">
				<ul>
					<li>
						<a href="#">黄志良</a>
					</li>
					<li>
						<a href="#">黄志良</a>
					</li>
					<li>
						<a href="#">黄志良</a>
					</li>
				</ul>
			</div>
			<div class="title">历史记录<i onclick="delCookies()"></i></div>
			<ul class="mui-table-view history-list" id="history-list">
			    <li class="mui-table-view-cell cs_history_item">黄致列</li>
			    <li class="mui-table-view-cell cs_history_item">招商中证</li>
			    <li class="mui-table-view-cell cs_history_item">拉克丝</li>
			</ul>
		</div>
		<div class="search-2">
			<div class="title">相关搜索</div>
			<div class="flex-box t_cen cs_result_title">
				<div class="flex-2">
					名称
				</div>
				<div class="flex-1 ">
					代码
				</div>
				<div class="flex-1">
					类型
				</div>
			</div>
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" href="#">
			        	<div class="flex-box cs-info-item">
				        	<div class="flex-2 t_hide">
				        		黄志良
				        	</div>
				        	<div class="flex-1 t_cen">
				        		--
				        	</div>
				        	<div class="flex-1 t_cen">
				        		基金经理
				        	</div>
				        </div>
			        
			        </a>

			    </li>

			</ul>
		</div>
	</div>
	<script>
		$(function(){
			$(".search-header input").on('focus',function(){
				$(this).parents('.search-header').css({"background":"#fff"})
				$(this).css({"background":"#eceef4"})
				$(".search-cancel").css("color","#a9aaab")
			})
			$(".search-header input").on('blur',function(){
				$(this).parents('.search-header').css({"background":"linear-gradient(to bottom,#ffc13c,#fea32c)"})
				$(this).css({"background":"#fff"})
				$(".search-cancel").css("color","#fff")
			})
			
			//手机键盘回车键事件
			$(document).keydown(function (event) {
			 	if (event.keyCode == 13) {
			 		var keyword = $(".search-header input").val();
			 		if (keyword=='') {
			 			mui.alert('请输入搜索关键字');
			 		} else{
						console.log(keyword);
//						历史记录记录关键字
			 			searchBykey (keyword);
//			 			这里跳转到搜索结果列表去
						location.href="../search/search-result.html?keyword="+keyword;
			 		}
				}
			})
			 
			//输入搜索文字事件
			$(".search-header input").on("keyup",function(){
		    	var value = $(this).val();
		    	console.log(value)
		        if(value == ''){
//		        	内容为空隐藏匹配列表
		            $(".search-2").hide();
		            $(".search-1").show()
		        }else{
//		        	有内容ajax请求模糊搜索将返回结果渲染到列表中并展示
		            $(".search-2").show();
		           	$(".search-1").hide()
		        }
		    })

		})
		
		
		
		$(function  () {
//			getvalue = localStorage.getItem('cs_searchlist');
//			getvalue =  eval('(' + getvalue + ')'); 
//			console.log(typeof getvalue); 
			uphistory ();
		})
		
		function searchBykey (setvalue) {
			getvalue = localStorage.getItem('cs_searchlist');
			console.log( JSON.stringify(getvalue) ); 
			console.log(setvalue);
			if (setvalue=='' || !setvalue) {
				mui.alert('请输入关键词');
			} else{
				var searcharr = [];
				
//					本地结果为空
				if (getvalue==null) {
					localStorage.setItem('cs_searchlist',setvalue);
					var getvalue = localStorage.getItem('cs_searchlist');
//					getvalue =  eval('(' + getvalue + ')'); 
					console.log(JSON.stringify(getvalue));
					 uphistory ()
				}else{
//					已经存在记录 把本地记录字符转为数组
//					console.log('追加');
					searcharr = getvalue.split(',');
					searcharr = remove_repeat(searcharr,setvalue);
					console.log(searcharr);
					searchstr = searcharr.join(',')
					localStorage.setItem('cs_searchlist',searchstr)
//					console.log('存储的结果是'+searchstr);
					var getvalue = localStorage.getItem('cs_searchlist');
//					getvalue =  eval('(' + getvalue + ')'); 
//					console.log(JSON.stringify(getvalue));
					 uphistory ()
				}
			}
		}  
//		删除记录
		function delCookies () {
			localStorage.removeItem("cs_searchlist"); 
			$('#history-list').html('<p style="text-align: center;color: #999;font-size: 12px;line-height: 40px;">暂无记录</p>');
			mui.alert('记录已清空');
		}
		
//		更新历史记录
		function uphistory () {
			var getvalue = localStorage.getItem('cs_searchlist');
			searcharr = [];
			
			if(!getvalue){
				$('#history-list').html('<p style="text-align: center;color: #999;font-size: 12px;line-height: 40px;">暂无记录</p>');
				return false;
			}
			searcharr = getvalue.split(',');
			var html  = '';
			for(var i = 0; i<searcharr.length;i++){
				html+='<li class="mui-table-view-cell cs_history_item">'+searcharr[i]+'</li>';
			}
			$('#history-list').html(html);
		}
		
//		去除重复
		function remove_repeat (arr,str) {
			for(var i=0;i<arr.length;i++){
				if (arr[i]==str) {
					return arr;
				}
			}
			arr.push(str)
			return arr;
		}
		
//		    console.log(remove_repeat([12,1],3))   
	</script>
</body> 
</html>